<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>layer3</title>
  <script type="text/javascript">
    (function () {
      var b = document.createElement("meta");
      b.setAttribute("name", "viewport");
      var c = window.devicePixelRatio,
        a = c ? 1 / c : 1;
      window.screen.availWidth == document.documentElement.offsetWidth && (c = a = 1);
      document.documentElement.setAttribute("data-dpr", c || 1);
      window.navigator.userAgent.match(/android/i) ? b.setAttribute("content", "width=device-width, initial-scale=" +
        a + ", maximum-scale=" + a + ", minimum-scale=" + a + ", user-scalable=no, viewport-fit=cover") : b.setAttribute(
        "content", "initial-scale=" + a + ", maximum-scale=" + a + ", minimum-scale=" + a +
        ", user-scalable=no, viewport-fit=cover");
      document.head.appendChild(b)
    })();
  </script>
  <script type="text/javascript">
    var dpr = document.documentElement.getAttribute("data-dpr") || 1,
      width = document.documentElement.offsetWidth,
      fontSize = 100 / 750 * width;
    document.querySelector("html").style.fontSize = fontSize + "px";
    window.addEventListener("resize", function () {
      var a = 100 / 750 * document.querySelector("html").offsetWidth;
      document.querySelector("html").style.fontSize = a + "px"
    });
  </script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="box">
    <h1>body很长，弹层弹出来后，不需要滚动，则直接给弹层添加一个touchmove事件并阻止默认事件e.preventDefault();即可。</h1>
    <h1>需要条件：弹层不用滚动</h1>
    <div class="layer" id="layer">
      <div class="layer-box">
        <div class="close" id="close">X</div>
        <div class="layer-cont">百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。</div>
        <ul class="layer-list" style="display: none">
          <li>第一行</li>
          <li>第二行</li>
          <li>第三行</li>
          <li>第四行</li>
          <li>第五行</li>
          <li>第六行</li>

          <li>66666</li>

          <li>第一行</li>
          <li>第二行</li>
          <li>第三行</li>
          <li>第四行</li>
          <li>第五行</li>
          <li>第六行</li>
        </ul>
        <div class="btns">
          <div class="btn-confirm">确认</div>
          <div class="btn-cancel">取消</div>
        </div>
      </div>
    </div>
    <div class="for-height">
      为了称高度 - 百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      <img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。

      <img src="http://pic3.nipic.com/20090527/1242397_102231006_2.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      <img src="http://pic22.nipic.com/20120714/9622064_105642209176_2.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      为了称高度 - 百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      <img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      <button id="btn">点击出弹层</button>
      <img src="http://pic3.nipic.com/20090527/1242397_102231006_2.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      <img src="http://pic22.nipic.com/20120714/9622064_105642209176_2.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
    </div>
  </div>
  <script>
    btn.onclick = function () {
      layer.style.display = 'block';
      layer.addEventListener('touchmove', function (e) {
        e.preventDefault();
      }, false);
    }
    var closeBtn = document.getElementById('close');
    closeBtn.onclick = function () {
      layer.style.display = 'none';
      // 弹窗关闭后，可解除所有禁止 - 懒人就不写了
    }
    console.log(
      `
      在弹层不需要超出滚动的情况下，才可以使用这个。也就是禁止整个layer弹层的touchmove的默认事件。就可以阻止滚动穿透。

      同样，如果弹层中需要滚动效果，则不能解决了。那么这时，就引来我们的主题难点，可以有以下几种思路解决：

      !1. 简单粗暴，一阵见血之，谁能动谁动，谁不能动就禁止。找出**可滚动区域再打开touchmove事件**，也就是在layer（黑蒙层）里不能滚动，但是layer的content内容里可以滚动。但是好像需要判断滚动到顶部和滚动到底部的时候，不给他滚动。但是还是有毛病，如果触碰到顶端或低端，就又穿透了。

      !2. 从弹层上入手，不让弹层用css自动的overflow-scroll,而是超出继续隐藏，而是简单粗暴地利用js的touchstart、move等事件协助写一个**自定义滚动效果**，


      3. 不从弹层上入手，也就是不禁掉弹层的touchmove默认事件。而是继续给body一个overflow-hidden的position-fixed，但是同时要**记录用户滚动页面的位置**，在弹层展开的时候赋给body，等关闭弹层的时候再让他继续滚动之类的。

      4. 查找scrollview... ... 那个属性值


      n.插件解决-fastclick的用法。
      n+1.除了fastclick，搜集其他可以解决的插件。
    `
    )
  </script>
</body>

</html>